<template>
    <div style="padding:10px">
        <div style="margin:10px">
            <el-button type="primary" @click="add">新增</el-button>
            
        </div>
    
       <div style="margin:10px">
        <el-table
            :data="tableData"
            border
            style="width: 100%">
            <el-table-column
            prop="id"
            label="序号"
            
            >
            </el-table-column>
            <el-table-column
            prop="title"
            label="资讯标题"
            
            >
            </el-table-column>
            <el-table-column
            prop="publishDate"
            label="发布日期"
    
            >
            </el-table-column>
    
            <el-table-column
            prop="beginDate"
            label="生效日期"
            
            >
            </el-table-column>
    
            <el-table-column
            prop="status"
            label="状态"
            >
            </el-table-column>
  
            <el-table-column
            prop="type"
            label="资讯类型"
            >
            </el-table-column>
  
            <el-table-column
            prop="browserTotal"
            label="浏览次数"
            >
            </el-table-column>
  
            <el-table-column
            fixed="right"
            label="操作"
            width="200">
            <template slot-scope="scope">
                <el-button @click="handleEdit(scope.row)" type="button" size="mini">编辑</el-button>
                
                <el-popconfirm @confirm="handleDelete(scope.row)" title="这是一段内容确定删除吗？">
            
                  <el-button  slot="reference" type="danger" size="mini">删除</el-button>
        
                </el-popconfirm>  
            </template>
            </el-table-column>
        </el-table>
       </div>
       <div class="block" style="margin:10px 0">
        <el-pagination
          @current-change="handleCurrentChange"
          :current-page="currentPage"
          layout="total,  prev, pager, next, jumper"
          :total=this.total>
        </el-pagination>
      </div>
      
        
        <!-- 新增表 -->
        <el-dialog title="提示" :visible.sync="dialogVisible" width="40%">
          <el-form :model="form" label-width="120px" :rules="rules">
            <el-form-item label="资讯类型">
              <el-select v-model="form.type" placeholder="请选择资讯类型" style="width:80%">
                <el-option label="产品发布" value="产品发布"></el-option>
                <el-option label="集团新闻" value="集团新闻"></el-option>
              </el-select>
            </el-form-item>
            
            <el-form-item label="资讯标题" prop="title">
              <el-input v-model="form.title" style="width:80%"></el-input>
            </el-form-item>
            <el-form-item label="生效日期" prop="beginDate">
              <el-date-picker
                v-model="form.beginDate"
                type="datetime"
                value-format="yyyy-MM-dd HH:mm:ss"
                style="width:80%"
                placeholder="选择日期时间"
               
                >
              </el-date-picker>
            </el-form-item>
  
            <el-form-item label="状态">
              <el-select v-model="form.status" placeholder="" style="width:80%">
                <el-option label="启用" value="启用"></el-option>
                <el-option label="禁用" value="禁用"></el-option>
              </el-select>
            </el-form-item>

            <el-form-item label="标题图片" >
              <el-upload
                ref="upload"
                action="http://localhost:8080/upload"
                :on-preview="handlePreview"
                :on-remove="handleRemove"
                :before-remove="beforeRemove"
                :on-success="handleAvatarSuccess"
                :limit="1"
                list-type="picture"
                :on-exceed="handleExceed"
                >
                <el-button size="small" type="primary">点击上传</el-button>

              </el-upload>
            </el-form-item>
  
            <el-form-item label="咨询摘要">
              <el-input type="textarea" v-model="form.summarize" style="width:80%"></el-input>
            </el-form-item>

            <el-form-item label="资讯内容">
              <el-input type="textarea" v-model="form.content" style="width:80%"></el-input>
            </el-form-item>
    
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="save">确 定</el-button>
          </span>
        </el-dialog>
  
      </div>
   
    </template>
    
    <script>
    
      export default {
        data() {
        
          return {
            dialogVisible:false,
            search:'',
            currentPage:1,
            pageSize:10,
            total:10,
            gettime: "",
            form:{
             
            },
            tableData: [
            ],
            rules:{
              title:[
                {max:50,message:'长度最长50个字符',trigger:'blur'}
              ]
            },
  
          }
        },
        created() {
          this.load()
          this.currentTime();
        },
        methods:{
            
            load(){
            this.$Ajax.get("getAdvisoryInfo",{
                params:{
                  page:this.currentPage,
                }
              })
              .then(res =>{
              console.log(res),
              this.total = res.data.total
              this.tableData = res.data.rows
              })
            },
            add(){
              this.dialogVisible=true
              console.log(this.gettime);
              this.clearform
              this.form={publishDate:this.gettime }
              this.$refs['upload'].clearFiles()
            },
            clearform(){
              this.form = { }
              this.imageUrl = ''
            },
            save(){
              if(this.form.id){//更新
                this.$Ajax.post("modifyAdvisoryInfoById",this.form).then((result) => {
                  console.log("result");
                  if(result.data.flag == true){
                    this.$message({
                      type:"success",
                      message:result.data.message
                    })
                  }else{
                    this.$message({
                      type:"error",
                      message:result.data.message
                    })
                  }
                  this.load()//刷新表格数据
                  this.dialogVisible = false //关闭弹窗
                })
              }else{ //新增
                this.$Ajax.post("insertAdvisoryInfo",this.form).then((result) => {
                  if(result.data.flag == true){
                    this.$message({
                      type:"success",
                      message:result.data.message
                    })
                  }else{
                    this.$message({
                      type:"error",
                      message:result.data.message
                    })
                  }
                  this.load()//刷新表格数据
                  this.dialogVisible = false //关闭弹窗
                })
              }
            },
              
            
            handleEdit(row){
                this.form = JSON.parse(JSON.stringify(row))
                this.dialogVisible = true
                this.$nextTick(() => {
                this.$refs['upload'].clearFiles()
              })
            },
            handleDelete(row){
              console.log(row);
              this.$Ajax.post("deleteAdvisoryById",row).then((result) => {
                  if(result.data.flag == true){
                    this.$message({
                      type:"success",
                      message:result.data.message
                    })
                  }else{
                    this.$message({
                      type:"error",
                      message:result.data.message
                    })
                  }
                  this.load()//刷新表格数据
                  this.dialogVisible = false //关闭弹窗
                })
            },

            handleCurrentChange(pagenum) {
            
            this.currentPage = pagenum
            console.log(`当前页: ${pagenum}`);
            this.load()
            },
          
           
            // 获取当前时间
            getTime() {
            var _this = this;
              let yy = new Date().getFullYear();
              var mm =
                new Date().getMonth() > 9
                  ? new Date().getMonth() + 1
                  : new Date().getMonth() == 9
                  ? new Date().getMonth() + 1
                  : '0' + (new Date().getMonth() + 1);
              var dd = new Date().getDate() < 10 ? '0' + new Date().getDate() : new Date().getDate();
              let hh = new Date().getHours();
              let mf =
                new Date().getMinutes() < 10 ? '0' + new Date().getMinutes() : new Date().getMinutes();
              let ss =
                new Date().getSeconds() < 10 ? '0' + new Date().getSeconds() : new Date().getSeconds();
              _this.gettime = yy + '-' + mm + '-' + dd + ' ' + hh + ':' + mf + ':' + ss;
            },
            currentTime() {
              setInterval(this.getTime, 1000);
            },
            submitForm(formName) {
              this.$refs[formName].validate((valid) => {
                if (valid) {
                  alert('submit!');
                } else {
                  console.log('error submit!!');
                  return false;
                }
              });
            },
            resetForm(formName) {
              this.$refs[formName].resetFields();
            },
            beforeAvatarUpload(file) {
              const isJPG = file.type === 'image/jpeg';
              const isLt2M = file.size / 1024 / 1024 < 2;

              if (!isJPG) {
                this.$message.error('上传头像图片只能是 JPG 格式!');
              }
              if (!isLt2M) {
                this.$message.error('上传头像图片大小不能超过 2MB!');
              }
              return isJPG && isLt2M;
            },
            handleRemove(file, fileList) {
              console.log(file, fileList);
            },
            handlePreview(file) {
              window.open(file.response.url)
              console.log(file);
            },
            handleExceed(files, fileList) {
              this.$message.warning(`当前限制选择 1个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`);
            },
            beforeRemove(file, fileList) {
              return this.$confirm(`确定移除 ${ file.name }？`);
            },
            handleAvatarSuccess(res, file) {
              this.form.img = res
            }
            
        },
      }
    </script>
    
    <style>
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #409EFF;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 100px;
      height: 100px;
      line-height: 100px;
      text-align: center;
    }
    .avatar {
      width: 100px;
      height: 100px;
      display: block;
    }
  </style>